<template>
    <div>
        <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in gallery" :key="index">
              <img :src="item.img_url" alt="" width="100%" style="display:block">
            </van-swipe-item>
        </van-swipe> -->
        <!-- 头部 -->
        <Top></Top>
        <!-- 商品信息 -->
        <div class="info">
            <div class="title">{{info.name}}</div>
            <div class="goods_brief">{{info.goods_brief}}</div>
            <div class="retail_price">{{info.retail_price | RMBNumber}}</div>

        
        </div>
        <van-cell title="展示弹出层" is-link />
        <!-- 商品参数 -->
        <div class="attribute">
            <h3>商品参数</h3>
            <ul>
              <li v-for="(item,key) in attribute" :key="key">
                  <div class="l">{{item.name}}</div>
                  <div class="r van-ellipsis">{{item.value}}</div>
              </li>
          </ul>
        </div>
        <div class="tp"></div>
         <div class="issue">
          <div class="title">
            <span style="">常见问题</span> 
          </div>
          <ul class="content">
            <li class="content_v" v-for="item in issue" :key="item.id">
              <!-- <div class="desc"></div> -->
              <div class="content_v_two">
                <h3>{{ item.question }}</h3>
                <p>{{ item.answer }}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="title">
            <span>相关产品</span>
            <xiangguanchanpin :goodsList="goodsList"/>
        </div>

        <!-- 底 -->
    <van-goods-action>
      <van-goods-action-icon 
          :icon="isCollected?'star':'star-o'" 
          :text="isCollected?'已收藏':'未收藏'" 
          :color="isCollected?'darkred':'#333'" 
          @click="isCollected = !isCollected"  /> 
     
      <van-goods-action-icon icon="cart-o" text="购物车" badge="" @click="gwc()"/>
      <van-goods-action-button type="danger" text="立即购买" @click="funb()"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addgwc()"/>

    </van-goods-action>

       
        <!-- <XiangQingBottom :goodsId="goodsId" :productList="productList" /> -->
    </div>
</template>

<script>
import {GetXiangQing,GetXiangGuan,AddGWC} from "@/request/api";
import Top from "@/components/xiangqingtop"
import xiangguanchanpin from "@/components/xiangguanchanpin"
import XiangQingBottom from "@/components/xiangqingbottom"
import { Toast } from 'vant';
export default {
    name: 'WorkspaceJsonXiangqingye',

    data() {
        return {
          isCollected:false,
            gallery:[],
            //商品信息
            info:{},
            
            //商品参数
            attribute:[],
            //常见问题
            issue: [],
            //商品信息(图片)
            goods_desc:"",
            //相关产品列表
            goodsList:[],
            goodsId:'',
            productList:[]
        };
    },
    components:{
        Top,xiangguanchanpin,XiangQingBottom
    },

    mounted() {
        
    },

    methods: {
      onClickcart(){
            this.$router.push('/cart');
        },
        // 点击购物车跳转到购物车页面
        gwc(){
          let token= localStorage.getItem('token')
            if(token){
              this.$router.push('/cart')
            }else{
              Toast.loading({
              message: '请先登录',
              forbidClick: true,
              duration:800
            });
            // 指定你去哪
            this.$router.push('/user')
            }
        },
        addgwc(){
        let token= localStorage.getItem('token')
          if(token){
            AddGWC({goodsId:this.$route.query.id,productId:this.productList[0].id,number:this.value}).then(res=>{
                  // console.log(res);
                  Toast.success('添加成功');
              })    
          
          }else{
            Toast.loading({
            message: '请先登录',
            forbidClick: true,
            duration:800
          });
          // 指定你去哪
          this.$router.push('/user')
          }
    },
      
      },
    created(){
        this.goodsId=this.$route.query.id
        //请求商品详情数据
        GetXiangQing({
        id: this.$route.query.id 
        }).then((res) => {
        // console.log(res.data);
        this.gallery = res.data.gallery
        let { info ,attribute,issue,productList} = res.data
        this.info = info 
        this.attribute = attribute
        this.goods_desc = info.goods_desc 
        this.issue = issue
        this.productList=productList
        });
        //获取相关产品数据
        GetXiangGuan({ id: this.$route.query.id }).then((res) => {
            //  console.log(res.data);
            this.goodsList = res.data.goodsList
        });
      }
}
</script>

<style lang="less" scoped>
    .info{
        background-color: #fff;
        text-align: center;
        line-height: .4rem;
        padding: .1rem 0;
        border-bottom: 1px solid #ccc;
        .title{
            font-size: .2rem;
        }
        .retail_price{
            color: #8b0000;
            font-size: .1rem;
        }
        .goods_brief{
            font-size: .15rem;
        }
    }
    //商品参数
    .attribute{
        background-color: #fff;
        margin-top: .2rem;
        padding: .1rem .168rem;
        h3{
            font-size: .2rem;
            line-height: .26rem;
        }
        ul{
          width: 100%;
        }
        li{
          width: 100%;
          height: .30rem;
          line-height: .3rem;
          background-color: #efefef;
          display:flex;
          margin-bottom: .10rem;
          border-radius: .05rem;
      }
      .l{
        width: 26%;
        text-align: right;
        margin-right: .1rem;
        color: #999999;
        font-size: .12rem;
      }
      .r{
          flex: 1;
          text-align: left;
          font-size: .14rem;
      }
        
        
    }
    
     //常见问题
      .issue {
        background-color: #fff;
        margin-top: 10px;
        //标题样式
        .mytitle {
          position: relative;
          margin-top: 3px;
    
          
          span {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 0;
            width: 1.5rem;
            border-top: 2px solid #ccc;
          }
        }
        .content {
          padding: 10px;
          width: 90%;
          text-align: left;
          .content_v {
            width: 100%;
            text-align: left;
            .content_v_two {
              h3 {
                font-size: 16px;
                height: 40px;
                line-height: 40px;
              }
              p {
                font-size: 14px;
                color: #666;
                line-height: 1.2;
              }
            }
          }
        }
      }
    .title {
        width: 100%;
        background-color: #fff;
        height: 0.5rem;
        position: relative;
        
        span {
            font-size: 0.18rem;
            width: 30%;
            position: relative;
            background-color: #fff; 
             display: block;
            text-align: center;
            margin: 0 auto;
            height: 0.5rem;
            line-height: 0.5rem;
            }
        }
      
</style>